<template>
	<view class="">

		<cu-custom bgColor="" :isBack="true">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<view class="c-order">
			<view >
				订单编号：{{orderInfo.order_sn || '--'}}
				<uni-icons type="forward" color="#000000" size="20"></uni-icons>
			</view>
			<view>
				下单时间：{{orderInfo.created_at || '--'}}
			</view>
			<view>
				收货信息：{{orderInfo.consignee || '--'}},{{orderInfo.address || '--'}}
			</view>
		</view>
		<view class="c-content">
			<input type="text" value="" placeholder="请填写快递名称" maxlength="20" v-model="formData.logistica_code" />
		</view>

		<view class="c-content">
			<input type="text" value="" placeholder="请填写物流编号" maxlength="20" v-model="formData.logistica_sn" />
		</view>


		<view class="c-content">
			<textarea @input="blur" adjust-position="true" maxlength="120" placeholder="请填写售后原因" />
			<text class="limit">{{formData.cause.length}}/120</text>
		</view>
		<view class="c-content">
			<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage"
				:server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl" :fileKeyName="file">
			</robby-image-upload>
		</view>
		<view class="c-btn-box">
			<button class="submit-btn" type="primary" @click="sub">提交</button>
		</view>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'

	export default {
		components: {
			robbyImageUpload,

		},
		data() {
			return {
				title: "申请售后",
				imageData: [],
				serverUrl: this.apiHost + '/comm/imageUp',
				serverUrlDeleteImage: this.apiHost + '/comm/delupload',
				formData: {
					order_id: 0,
					logistica_code: "", //物流名称
					logistica_sn: "", //快递运单号
					cause: '',
					money: 0,
					imgs: {},
					name: "", //快递名称
					

				},
				max_money: 0,
				goods_price: 0,
				after_money: 0,
				orderInfo: {},
				tips: '',
				type: ""
			}
		},
		onLoad(option) {
			this.type = option.type || "";
			this.formData.order_id = option.order_id
			this.apiRequest('/buyer/orderInfo', {
				order_id: option.order_id
			}).then(res => {
				this.orderInfo = res.data
				var bill = this.orderInfo.order_bill
				this.max_money = parseFloat(bill.online_amount) + parseFloat(bill.user_money);
				this.goods_price = parseFloat(bill.goods_price) - parseFloat(bill.coupon_price) -
					parseFloat(bill.discount_goods_price) -
					parseFloat(bill.first_reduction_price) -
					parseFloat(bill.full_reduction_price)
				if (this.formData.is_take == 0) {
					this.after_money = this.max_money
				} else {
					this.after_money = this.goods_price
				}
				this.tips = '输入金额，最多可退￥' + this.after_money
			})
		},
		methods: {
			deleteImage: function(e) {
				this.formData.imgs = e.allImages
			},
			addImage: function(e) {
				this.formData.imgs = e.allImages
			},

			/**
			 * @name 获取textarea内容
			 */
			blur(e) {
				this.formData.cause = e.detail.value
			},
			setMoney(e) {
				this.formData.money = e.target.value
			},
			sub() {
				let d = {};
				let dat = this.formData;
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}
				}

				this.apiRequest('/buyer/OnlineafterSale ', this.formData, 1).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/app/ShopCenter/pages/orderInfo?order_id='+this.formData.order_id
						});
					}

				})
			},
			showToast(content){
				uni.showToast({
					title:content,
					icon:'none'
				})
			},
			/**
			 * 验证表达式
			 */
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "logistica_code": //关于username的验证
						if (da.length ==0) {
							this.showToast("请填写快递名称");
							val = false;
						}
						break;
					case "logistica_sn":
						if (da.length==0) {
							this.showToast("请填写物流编号");
							val = false
						}
						break;
					case "cause":
						if (da.length==0) {
							this.showToast("请填写售后原因");
							val = false
						}
						break;
				}
				return val
			},
			changeTake(e) {
				this.formData.is_take = e.detail.value
				if (this.formData.is_take == 0) {
					this.after_money = this.max_money
				} else {
					this.after_money = this.goods_price
				}
				this.tips = '输入金额，最多可退￥' + this.after_money
			}
		}
	}
</script>

<style>
	.c-order {
		padding: 5%;
		background-color: #FFFFFF;
		width: 90%;
		margin: 3% auto;
		border-radius: 20rpx;
	}

	.c-order view {
		line-height: 1.5;
	}

	.c-content {
		width: 90%;
		padding: 5%;
		margin: 3% auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}
	.c-content .limit{
		position: absolute;
		right: 12rpx;
		color: #666666;
	}

	textarea {
		height: 200rpx;
		color: #666666;
		box-sizing: border-box;
		width: 100%;
	}

	.c-btn-box {
		padding: 2% 5%;
		width: 90%;
		margin-left: 5%;
	}

	.c-btn-box button {
		width: 100%;
		height: 80upx;
		border-radius: 10upx;
		font-size: $fontSize;
		background-color: #1270e0;
		line-height: 80upx
	}

	.after-box {
		background-color: #FFFFFF;
		width: 90%;
		padding: 5%;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.after-item {
		display: flex;
		align-items: center;
	}

	.after-item-tit {
		width: 200rpx;
		font-weight: bold;
	}

	.after-item-input {
		border: 1rpx solid #1270E0;

		display: flex;
		margin-top: 15upx;
		display: flex;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		align-items: center;
		border-radius: 20rpx;
		padding-left: 5rpx;
	}
</style>
